<template>
  <div class="maintenanceItem">
    <div class="maintenanceItem_header">
      <div v-for="(item, index) in propList" :key="index">{{ item }}</div>
      <div class="maintenanceItem_header_list">
        <!-- 开始合并 -->
        <div v-for="(ele, idx) in subPropList" :key="idx">{{ ele }}</div>
      </div>
    </div>
    <div class="maintenanceItem_body">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="maintenanceItem_body_item"
      >
        <div>{{ item.num }}</div>
        <div>{{ item.num }}</div>
        <div>{{ item.num }}</div>
        <div>{{ item.num }}</div>
        <div>{{ item.num }}</div>
        <!-- 开始合并 -->
        <div class="maintenanceItem_body_list">
          <div
            v-for="(item2, index2) in item.list"
            :key="index2"
            class="maintenanceItem_body_list_item"
          >
            <div>{{ item2.name }}</div>
            <div>{{ item2.name }}</div>
            <div>{{ item2.name }}</div>
            <div>{{ item2.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MaintenanceItem",
  props: {
    dataList: {
      type: Array,
      default: () => [
        { num: "1", list: [{ name: "维保项目1" }, { name: "维保项目2" }] },
        {
          num: "2",
          list: [
            { name: "维保项目1" },
            { name: "维保项目2" },
            { name: "维保项目3" },
          ],
        },
      ], // 必填
    },
  },
  data() {
    return {
      propList: ["设备编号", "设备名称", "型号规格", "责任人", "责任部门"],
      subPropList: ["维保项目", "计划维保时间", "周期", "维护人"],
    };
  },

  mounted() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.maintenanceItem {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid gainsboro;
  .maintenanceItem_header {
    border-top: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
    display: flex;
    flex-direction: row;
    .maintenanceItem_header_list {
      display: flex;
      flex-direction: row;
    }
    > div {
      flex: 1;
      border-left: 1px solid gainsboro;
    }
  }
  .maintenanceItem_body {
    display: flex;
    flex-direction: column;
    .maintenanceItem_body_item {
      display: flex;
      flex-direction: row;

      > div {
        flex: 1;
        border-top: 1px solid gainsboro;
        border-left: 1px solid gainsboro;
      }
    }
    .maintenanceItem_body_list {
      display: flex;
      flex-direction: column;
      .maintenanceItem_body_list_item {
        display: flex;
        flex-direction: row;
        border-top: 1px solid gainsboro;
        > div {
          flex: 1;
          border-right: 1px solid gainsboro;
        }
      }
    }
  }
}
</style>
